<template>
  <!-- 登录页 -->
  <div class="login">
    <div style="width:80%;margin:20% 0">
      <van-tabs v-model="roleType" type="card" color="#99CC33">
        <van-tab name="parent" title="家长端"></van-tab>
        <van-tab name="teacher" title="教职工端"></van-tab>
      </van-tabs>
    </div>
    <div style="width:85%">
      <van-field
        v-model="tel"
        type="tel"
        label="+86"
        placeholder="请输入手机号"
        label-align="center"
        label-width="60"
      />
      <van-field
        v-model="sms"
        maxlength="6"
        center
        clearable
        label="   "
        placeholder="请输入短信验证码"
        label-width="60"
      >
        <van-button
          slot="button"
          size="small"
          type="default"
          :loading="smsLoad"
          @click="sendSms()"
        >发送验证码</van-button>
      </van-field>
      <van-button
        type="primary"
        color="#FF9900"
        block
        size="large"
        style="margin-top:30%"
        :loading="submitLoad"
        @click="onSubmit"
      >登录</van-button>
    </div>
    <p style="font-size:12px;">首次登陆会自动创建新账号</p>
  </div>
</template>

<script>
import { GetVerifyCode, Login } from "@/api/user";
import { Toast } from "vant";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      tel: "",
      sms: "",
      roleType: "parent",
      phoneRules: [
        { required: true, messgage: "请输入手机号" },
        { validator: this.phoneValidator, message: "手机号格式错误" }
      ],
      smsLoad: false, //短信发送按钮加载态
      submitLoad: false //提交加载态
    };
  },
  methods: {
    async sendSms(e) {
      this.smsLoad = true;
      if (
        /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(
          this.tel
        )
      ) {
        const result = await GetVerifyCode({ phoneNumber: this.tel });
        if (result.result == "OK") {
          Toast.success("验证码已发送");
        }
      } else if (this.tel == "") {
        Toast.fail("手机号不能为空");
      } else {
        Toast.fail("手机格式有误");
      }
      this.smsLoad = false;
    },
    async onSubmit() {
      this.submitLoad = true;
      let reg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
      if (reg.test(this.tel) && this.sms.length == 6) {
        //发起请求
        const result = await Login({
          phoneNumber: this.tel,
          verifyCode: this.sms,
          roleType: this.roleType,
          openid: this.openId
          // openid: 'o6B1iv6gsZzNzPPs3QGQsx__r3Gc'
        });
        console.log(result);
        
        if (result.result == "OK") {
          this.$store.commit("setPhone", this.tel);
          if (result.data.roleType == "tourist") {
            //将游客变为家长 --------------------------暂时-------------------------------
            this.$store.commit("setRoleType", "parent");
          } else {
            this.$store.commit("setRoleType", result.data.roleType);
          }
          console.log("绑定：", this.isBind);
          console.log("角色：", this.role);

          // 检测是否已绑定'
          if (this.isBind == true && this.role == "parent") {
            console.log("家长，已绑定");
            //家长--已绑定
            this.$router.push({ path: "/home" });
          } else if (this.role == "teacher") {
            console.log("职工登录成功！");
            // 职工-已绑定
            this.$store.commit("setCampusList", result.data.campusList);
            if (result.data.campusList.length == 1) {
              // 只有一个校区 前往主页
              this.$store.commit(
                "setCampusID",
                result.data.campusList[0].campusID
              );
              this.$store.commit(
                "setTeacherName",
                result.data.campusList[0].userName
              );
              this.$router.push({ path: "/workBench" });
            } else {
              //多个校区 前往选中
              this.$router.push({ path: "/firstLogin" });
            }
          } else {
            console.log("未绑定");
            // 未绑定 进入绑定页面
            this.$router.push({ path: "/firstLogin" });
          }
        }
      } else if (!reg.test(this.tel)) {
        Toast.fail("手机格式有误");
      } else if (this.sms.length < 6) {
        Toast.fail("验证码格式有误");
      }
      this.submitLoad = false;
    }
  },
  mounted() {},
  computed: {
    ...mapGetters({
      openId: "getOpenId",
      role: "getRoleType",
      isBind: "getIsBind"
    })
  }
};
</script>

<style scoped>
.login {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-evenly; */
  width: 100%;
  height: 65%;
}
</style>